<template>
  <el-dialog
    class="dialogStyle"
    style="width: 50vw"
    :title="'2-2南部皮带变频器故障状态'"
    v-model="visible"
  >
    <div class="container">
      <div class="panel">
        <div class="panel-header">
          <h2>变频器故障状态监测</h2>
          <!-- <span class="note">状态指示灯：<span class="red-dot"></span>表示故障，<span class="grey-dot"></span>表示正常</span> -->
        </div>

        <div class="table-container">
          <el-row class="header-row">
            <el-col :span="9">故障类型</el-col>
            <el-col :span="3">1</el-col>
            <el-col :span="3">2</el-col>
            <el-col :span="3">3</el-col>
            <el-col :span="3">4</el-col>
            <el-col :span="3">5</el-col>
          </el-row>

          <el-row v-for="(row, index) in faultTypes" :key="index">
            <el-col :span="9">{{ row.label }}</el-col>
            <el-col v-for="n in 5" :key="n" :span="3">
              <div
                class="indicator-light"
                :class="
                  computedResults(row.keyPrefix + n + '_DI', operator.NO).value
                    ? 'red'
                    : 'grey'
                "
              ></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { act } from "@/utils/websocket";
import { operator } from "@/utils/op_enums";
import { useTagResults } from "@/utils/useTagResults";

const faultTypes = [
  { label: "接地故障", keyPrefix: "Gnd" },
  { label: "超速", keyPrefix: "Speed" },
  { label: "主从通讯故障", keyPrefix: "MSC" },
  { label: "电机参数", keyPrefix: "Param" },
  { label: "直流欠压", keyPrefix: "DCUV" },
  { label: "无使能信号", keyPrefix: "NoEnable" },
  { label: "主板和接口板通讯故障", keyPrefix: "MainComm" },
  { label: "控制盘丢失", keyPrefix: "CtrlLoss" },
  { label: "堵转", keyPrefix: "Stall" },
  { label: "电机缺相", keyPrefix: "Phase" },
  { label: "紧急停止", keyPrefix: "EMStop" },
  { label: "变频器过温", keyPrefix: "OT" },
];

const visible = ref(false);

const computedResults = (
  key: string,
  op: operator,
  op_number?: number,
  retain?: number
) =>
  computed(() => useTagResults(act.PD_22N.PD_22_N[key], op, op_number, retain));

const openDialog = () => {
  visible.value = true;
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.dialogStyle {
  .container {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .panel {
    display: flex;
    flex-direction: column;
    background-color: var(--el-bg-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--el-color-primary-light-9);
    border-bottom: 1px solid var(--el-border-color-light);

    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }



    .note {
      font-size: 14px;
      color: var(--el-text-color-regular);

      .note-highlight {
        color: var(--el-color-danger);
        font-weight: 500;
      }
    }

    // .note {
    //   font-size: 13px;
    //   color: var(--el-text-color-secondary);
    //   display: flex;
    //   align-items: center;

    //   .red-dot,
    //   .grey-dot {
    //     display: inline-block;
    //     width: 12px;
    //     height: 12px;
    //     border-radius: 50%;
    //     margin: 0 4px;
    //   }

    //   .red-dot {
    //     background-color: var(--el-color-danger);
    //   }

    //   .grey-dot {
    //     background-color: var(--el-border-color-dark);
    //   }
    // }
  }

  .table-container {
    overflow-x: auto;
    border: 1px solid var(--el-border-color-light);
  }

  .header-row {
    .el-col {
      background-color: var(--el-fill-color) !important;
      font-weight: 500;
      color: var(--el-text-color-primary);
      padding: 10px 5px;
      text-align: center;
      font-size: 13px;
    }
  }

  .el-row {
    .el-col {
      border: 1px solid var(--el-border-color-lighter);
      padding: 10px 5px;
      text-align: center;
      font-size: 13px;
      color: var(--el-text-color-regular);
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        font-weight: 500;
        color: var(--el-text-color-primary);
        background-color: var(--el-fill-color-lighter);
        justify-content: center;
        padding-left: 12px;
      }
    }
  }

  .indicator-light {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid var(--el-border-color);

    @extend %status-colors;
  }

  // 定义基础颜色类
  %status-colors {
    &.green {
      background-color: var(--el-color-success);
    }
    &.red {
      background-color: var(--el-color-danger);
    }
    &.yellow {
      background-color: var(--el-color-warning);
    }
    &.grey {
      background-color: var(--el-border-color-dark);
    }
  }
}
</style>
